<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>菜鸟轮播</title>
		<style type="text/css">
			ul{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			.warp{
				position: relative;
				width: 800px;
				height: 410px;
				margin: 100px auto;
			}
			
			.list{
				position: relative;
				width: 100%;
				height: 100%;
				padding-left: 0;
				margin-top: 0;
				list-style: none;
				color: #fff;
				font-size: 50px;
				text-align: center;
				line-height: 300px;
				
			}
			
			.item{
				width: 100%;
				height: 100%;
				position: absolute;
				/*淡入淡出效果*/
				opacity: 0;
				transition: all 1s;
				
			}
			.item:nth-child(1){
				background-color: #000000;
			}
			
			.item:nth-child(2){
				background-color: #87CEEB;
			}
			
			.item:nth-child(3){
				background-color: #F62455;
			}
			
			.item:nth-child(4){
				background-color: #FF1493;
			}
			
			.item:nth-child(5){
				background-color: #FAA605;
			}
			
			.priBtn,.nextBtn{
				display: block;
				width: 50px;
				height: 30px;
				z-index: 100;
				background-color: #CCCCCC;
				text-align: center;
				line-height: 30px;
				font-size: 20px;
				opacity: 0.5;
				border-radius: 10px;
				display: none;
				
			}
			
			.priBtn{
				position: absolute;
				top: 190px;
				left: 10px;
			}
			
			.nextBtn{
				position: absolute;
				top: 190px;
				right: 10px;
			}
			
			.priBtn:hover,.nextBtn:hover{
				cursor: pointer;
				color: red;
			}
			
			.item.active{
				opacity: 1;
				z-index: 10;
			}
			
			img{
				width: 800px;
				height: 410px;
			}
			
			.warp .dot{
				position: absolute;
				bottom: 10px;
				right: 50px;
				z-index: 10;
				display: flex;
				width: 200px;
				height: 10px;
				/* background-color: #F6BB06; */
			}
			
			.dot li{
				width: 10px;
				height: 100%;
				/* background-color: #CCC; */
				border: 1px dashed #CCCCCC;
				margin-left: 16px;
				border-radius: 50%;
			}
			
			/* .dot li:hover{
				cursor: pointer;
			} */
			
			.colour{
				background-color: #12B7F5;
			}
			
		</style>
	</head>
	<body>
		<div class="warp">
			<ul class="list">
				<li class="item active"><a href="images/dc845dv-a40abd00-991a-45a0-9983-76cf35f705bc.jpg"><img src="images/dc845dv-a40abd00-991a-45a0-9983-76cf35f705bc.jpg" ></a></li>
				<li class="item"><a href="images/dchjjtf-f4ab557c-b9fb-49a0-a587-4294aecc5216.jpg"><img src="images/dchjjtf-f4ab557c-b9fb-49a0-a587-4294aecc5216.jpg" ></a></li>
				<li class="item"><a href="images/dcu2kfw-fcd88f19-3e3a-4b15-9757-0091704e628f.jpg"><img src="images/dcu2kfw-fcd88f19-3e3a-4b15-9757-0091704e628f.jpg" ></a></li>
				<li class="item"><a href="images/freak_by_wlop_dc1sdan-pre.jpg"><img src="images/freak_by_wlop_dc1sdan-pre.jpg" ></a></li>
				<li class="item"><a href="images/dchjjtf-f4ab557c-b9fb-49a0-a587-4294aecc5216.jpg"><img src="images/dchjjtf-f4ab557c-b9fb-49a0-a587-4294aecc5216.jpg" ></a></li>
			</ul>
			<span class="priBtn"><</span>
			<span class="nextBtn">></span>
			<ul class="dot">
				<li class="circle colour"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
				<li class="circle"></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var items = document.querySelectorAll('.item');
			var pri = document.querySelector('.priBtn');
			var next = document.querySelector('.nextBtn');
			var warp = document.querySelector('.warp');
			var circle = document.querySelectorAll('.circle');
			//鼠标移入按钮显示
				warp.addEventListener('mouseenter',function(){
					next.style.display = 'block';
					pri.style.display = 'block';
				},false);
				
				//鼠标移出按钮隐藏
				warp.addEventListener('mouseleave',function(){
					next.style.display = 'none';
					pri.style.display = 'none';
				},false);
			
			var index = 0//索引位
			//给两个按钮添加click事件
			next.addEventListener('click',change,false);
			pri.addEventListener('click',privoce,false);
			
			//初始化className
				function transfer(){
				for(var i = 0; i < items.length; i++){
					items[i].className = 'item';
					circle[i].className = 'circle';
				}
			}
			
			//向下切换
			function change(){
				transfer();
			
					var statu = function(){
					/* ++index;
					console.log(index); */
					if(index >= 4){
						index = 0;
					}else{
						++index;
						
						console.log(index);
					}
					items[index].className = 'item active';
					circle[index].className = 'circle colour';
					
				}
				statu();
				
			}
			
			
			
			//向上切换
			function privoce(){
				transfer();
				
				if(index == 0){
					index = 4;
				}else{
					--index;
					console.log(index);
				}
				items[index].className = 'item active';
				circle[index].className = 'circl colour';
			}
			
			//自动轮播
			setInterval(function(){
				change();
			},4000);
			

		
		</script>
	</body>
</html>